<template>
    <el-sub-menu :index="menu.path || '/'" v-if="menu.children">
        <template #title>
            <el-icon>
                <component :is="menu.icon" />
            </el-icon>
            <span>{{ menu.label }}</span>
        </template>
        <slide-menu v-for="(child) in menu.children" style="background-color: #000;" :key="child.id"
            :menu="child"></slide-menu>
    </el-sub-menu>
    <el-menu-item v-else :index="menu.path" @click="pushMenu(menu)">
        <el-icon>
            <component :is="menu.icon" />
        </el-icon>
        <template #title>
            <span>{{ menu.label }}</span>
        </template>
    </el-menu-item>
</template>

<script setup>
import { toRefs,computed } from "vue";
import {useStore} from 'vuex';
const props = defineProps(["menu"]);
const store=useStore()
const { menu } = toRefs(props);

const menuList=computed(()=>store.state.layout.menuList)

const pushMenu=(menu)=>{
    let menupushkone = false
    menuList.value.forEach(item => {
        item.path == menu.path ? menupushkone = true : ''
    })
    if (!menupushkone) {
        menuList.value.push(menu)
        store.commit('PUSHMENU', menuList.value)
    }
}
</script>

<style lang="less" scoped>
.el-menu-item .el-icon svg {
    vertical-align: unset;
}

.el-sub-menu__title .el-icon svg {
    vertical-align: unset;
}

::v-deep .el-sub-menu div {
    background-color: #000 !important;
}
</style>
